import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import Popup from '../../components/Popup/Popup';
import { checkWechatBound } from '../../../api/wechat';
import './Main.scss';

import AccountInfo from '../AccountInfo/AccountInfo';
import Home from '../../components/Home/Home';
import Office from '../Office/Office';
import Files from '../Files/Files';
import FileDetail from '../FileDetail/FileDetail';
import MainManage from '../Mainmanage/MainManage';
import UserManage from '../UserManage/UserManage'
import App,{timerData} from '../App/App';

class Main extends Component {
  state = {
    accountCenterVisible: false,
    homeVisible: true,
    officeVisible: false,
    fileVisible: false,
    fileDetailVisible: false,
    popupVisible: false,
    appVisible:false,
    manageVisible:false,
    userManageVis: true,
    bindingStatus: 0,
  }

  componentWillReceiveProps(nextProps) {
    const { selectedMenu } = nextProps;
    if (selectedMenu === 'accountCenter') {
      this.setState({
        accountCenterVisible: true,
        homeVisible: false,
        officeVisible: false,
        fileVisible: false,
        fileDetailVisible: false,
        appVisible:false,
        manageVisible:false,
      });
    } else if (selectedMenu === 'home') {
      this.setState({
        accountCenterVisible: false,
        homeVisible: true,
        officeVisible: false,
        fileVisible: false,
        fileDetailVisible: false,
        appVisible:false,
        manageVisible:false,
      });
    } else if (selectedMenu === 'office') {
      this.setState({
        accountCenterVisible: false,
        homeVisible: false,
        officeVisible: true,
        fileVisible: false,
        fileDetailVisible: false,
        appVisible:false,
        manageVisible:false,
      });
    } else if (selectedMenu === 'storage') {
      this.setState({
        accountCenterVisible: false,
        homeVisible: false,
        officeVisible: false,
        fileVisible: true,
        fileDetailVisible: false,
        appVisible:false,
        manageVisible:false,
      });
    } else if (selectedMenu === 'fileDetail') {
      this.setState({
        accountCenterVisible: false,
        homeVisible: false,
        officeVisible: false,
        fileVisible: false,
        fileDetailVisible: true,
        appVisible:false,
        manageVisible:false,
      });
    }else if(selectedMenu==="app"){
      this.setState({
        accountCenterVisible: false,
        homeVisible: false,
        officeVisible: false,
        fileVisible: false,
        fileDetailVisible: false,
        appVisible:true,
        manageVisible:false,
      });
    }else if(selectedMenu==="manage"){
      this.setState({
        accountCenterVisible: false,
        homeVisible: false,
        officeVisible: false,
        fileVisible: false,
        fileDetailVisible: false,
        appVisible:false,
        manageVisible:true,
      });
    } else if (selectedMenu==="userManage") {
      this.setState({
        accountCenterVisible: false,
        homeVisible: false,
        officeVisible: false,
        fileVisible: false,
        fileDetailVisible: false,
        appVisible: false,
        manageVisible: false,
        userManageVis: true
      });
    }
  }
  componentDidMount() {
    this.checkWechatBound();
  }
  checkWechatBound = async () => {
    const response = await checkWechatBound();
    const { code, data } = response;
    if (code === 1) {
      if (!data) {
        this.setState({
          popupVisible: true,
          bindingStatus: 0,
        });
      }
    } else {
      console.error('微信绑定接口获取失败！');
    }
  }

  render() {
    return (
      <div className="main-view">
        <div className="wrapper" style={{ overflow: 'hidden' }}>
          <AccountInfo visible={this.state.accountCenterVisible} />
          <Home visible={this.state.homeVisible} />
          <Office visible={this.state.officeVisible} />
          <Files visible={this.state.fileVisible} />
          <MainManage visible={this.state.manageVisible} />
          <FileDetail visible={this.state.fileDetailVisible} />
          <UserManage visible={this.userManageVis} />
          {<App visible={this.state.appVisible} /> }
        </div>
        <footer>
          Copyright @ 2018 北京磐晟投资管理有限公司
        </footer>
        <Popup visible={this.state.popupVisible} bindingStatus={this.state.bindingStatus} />
      </div>
    );
  }
}

Main.propTypes = {
  selectedMenu: PropTypes.string.isRequired,
};

const mapStateToProps = state => ({
  selectedMenu: state.menu.selectedMenu,
});

export default connect(mapStateToProps)(Main);
